<!DOCTYPE html>
<html>
<head>
  <!-- 页面 meta -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>预约设置</title>
  <meta name="description" content="传智健康">
  <meta name="keywords" content="传智健康">
  <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../plugins/elementui/index.css">
  <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../css/style.css">
  <!-- 引入特定样式 -->
  <link rel="stylesheet" href="../css/orderset.css">
  <!-- 引入 js 组件库 -->
  <script src="../js/vue.js"></script>
  <script src="../plugins/elementui/index.js"></script>
  <script type="text/javascript" src="../js/jquery.min.js"></script>
  <script src="../js/axios-0.18.0.js"></script>
</head>
<body class="hold-transition">
<div id="app">
  <!-- 头部 -->
  <div class="content-header">
    <h1>预约管理
      <small>预约设置</small>
    </h1>
    <!-- 面包屑导航组件（显示当前页面的路径，快速返回之前的任意页面。） -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>预约管理</el-breadcrumb-item>
      <el-breadcrumb-item>预约设置</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!-- 主体 -->
  <div class="app-container">
    <div class="box">
      <!-- 预约设置 -->
      <div class="box-ordersetting">
        <!-- 文件上传/下载 -->
        <el-card class="box-card">
          <div class="boxMain">
            <el-button style="margin-bottom: 20px;margin-right: 20px" type="primary"
                       @click="downloadTemplate()">模板下载
            </el-button>
            <!-- 上传 Excel 模板文件组件 -->
            <el-upload action="/ordersetting/upload.do"
                       name="excelFile"
                       :show-file-list="false"
                       :on-success="handleSuccess"
                       :before-upload="beforeUpload">
              <el-button type="primary">上传文件</el-button>
            </el-upload>
          </div>
          <!-- 操作说明 -->
          <div class="tips">
            操作说明：请点击 "模板下载" 按钮获取模板文件，在模板文件中录入预约设置数据后点击 "上传文件" 按钮上传模板文件。
          </div>
        </el-card>
        <!-- 日历展示区域（含月份切换） -->
        <div class="calendar">
          <div class="month">
            <!-- 当前年份月份 -->
            <div class="currentdate">
              <span class="choose-year">{{ currentYear }} 年 </span>
              <span class="choose-month">{{ currentMonth }} 月 </span>
            </div>
            <!-- 月份切换控件 -->
            <div class="choose">
              <span @click="goCurrentMonth(currentYear,currentMonth)" class="gotoday">今天</span>
              <span @click="pickPre(currentYear,currentMonth)">❮</span>
              <span @click="pickNext(currentYear,currentMonth)">❯</span>
            </div>
            <!-- 清除浮动样式 -->
            <div class="clearfix"></div>
          </div>
          <!-- 日历控件 -->
          <div class="caldate">
            <!-- 星期几 -->
            <ul class="weekdays">
              <li>周一</li>
              <li>周二</li>
              <li>周三</li>
              <li>周四</li>
              <li>周五</li>
              <li>周六</li>
              <li>周日</li>
            </ul>
            <!-- 日期 -->
            <ul class="days">
              <!-- v-for 循环 每一次循环用 <li> 标签创建 1 天 -->
              <li v-for="dayobject in days">
                <template>
                  <!-- 非当前月份 -->
                  <div class="other-month" v-if="dayobject.day.getMonth() + 1 != currentMonth">
                    <!-- 具体几号 -->
                    <span>{{dayobject.day.getDate()}}</span>
                  </div>
                  <!-- 当前月份 -->
                  <div class="everyday" v-if="dayobject.day.getMonth() + 1 == currentMonth">
                    <!-- 具体几号 -->
                    <span class="datenumber">{{ dayobject.day.getDate()}}</span>
                    <template>
                      <template v-for="obj in leftobj">
                        <template v-if="obj.date == dayobject.day.getDate()">
                          <!-- 预约人数未满 -->
                          <template v-if="obj.number > obj.reservations">
                            <div class="usual">
                              <p>可预约 {{obj.number}} 人</p>
                              <p>已预约 {{obj.reservations}} 人</p>
                            </div>
                          </template>
                          <!-- 预约人数已满 -->
                          <template v-else>
                            <div class="fulled">
                              <p>可预约 {{obj.number}} 人</p>
                              <p>已预约 {{obj.reservations}} 人</p>
                              <p>已满</p>
                            </div>
                          </template>
                        </template>
                      </template>
                      <!-- 设置按钮（设置每日预约人数功能，只能设置明天开始的日期） -->
                      <button v-if="dayobject.day > today" @click="handleOrderSet(dayobject.day)"
                              class="orderbtn">设置
                      </button>
                    </template>
                  </div>
                </template>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            today: new Date(),   //  当前日期
            currentDay: 1,
            currentMonth: 1,
            LocalMonth: 1,
            currentYear: 1970,
            currentWeek: 1,
            days: [],
            leftobj: [] //  用于装载页面显示的月份已经进行预约设置的数据
        },
        created: function () {  //  在 VUE 初始化时调用
            this.initData(null);
        },
        methods: {
            //  预约设置
            handleOrderSet(day) {
                // alert(this.formatDate(day.getFullYear(), day.getMonth() + 1, day.getDate()));
                this.$prompt('请输入可预约人数', '预约设置', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValue: '100',   //  默认值
                    inputPattern: /^[0-9]*[1-9][0-9]*$/,
                    inputErrorMessage: '只能输入正整数'
                }).then(({value}) => {
                    /*this.$message({
                        type: 'success',
                        message: '你的输入是：' + value
                    });*/
                    //  发送 ajax 请求，将输入的数据提交到 OrderSettingController
                    axios.post("/ordersetting/editNumberByDate.do", {
                        number: value,   //  可预约人数
                        orderDate: this.formatDate(day.getFullYear(), day.getMonth() + 1, day.getDate()) //  日期
                    }).then((res) => {
                        if (res.data.flag) {
                            //  初始化当前页要展示的日期
                            this.initData(this.formatDate(day.getFullYear(), day.getMonth() + 1, 1));
                            this.$message({
                                type: 'success',
                                message: res.data.message
                            });
                        } else {
                            this.$message.error(res.data.message);
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },
            //  上传之前进行文件格式校验
            beforeUpload(file) {
                const isXLS = file.type === 'application/vnd.ms-excel';
                if (isXLS) {
                    return true;
                }
                const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
                if (isXLSX) {
                    return true;
                }
                this.$message.error('上传文件只能是 xls 或者 xlsx 格式！');
                return false;
            },
            //  下载模板文件
            downloadTemplate() {
                window.location.href = "../../template/ordersetting_template.xlsx";
            },
            //  上传成功提示
            handleSuccess(response, file) {
                if (response.flag) {
                    this.$message({
                        type: 'success',
                        message: response.message
                    });
                } else {
                    this.$message.error(response.message);
                }
                console.log(response, file, fileList);
            },
            //  初始化当前页要展示的日期（生成一个 35 天的日历）
            initData(cur) {
                //  当前月份的第一天
                var date;
                //  控制显示预定的天数
                var index = 0;
                //  1. 确定起始日期
                if (cur) {
                    // 如果有传入日期参数，使用该日期
                    date = new Date(cur);
                } else {
                    // 如果没有传入日期参数，计算当前月份的第一天
                    //  Sun Apr 27 2025 17:59:15 GMT+0800 (中国标准时间)  今天
                    var now = new Date(); // 获取当前日期
                    //  Sat Mar 01 2025 08:00:00 GMT+0800 (中国标准时间)  上个月的第 1 天
                    var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));
                    //  Fri Apr 04 2025 08:00:00 GMT+0800 (中国标准时间)  上个月的第 35 天
                    d.setDate(35);
                    //  Tue Apr 01 2025 08:00:00 GMT+0800 (中国标准时间)  这个月第一天
                    date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                }
                //  2. 设置当前日期信息
                //  获取月份中的第几天 1 号
                this.currentDay = date.getDate();
                //  获取当前年 2025 年
                this.currentYear = date.getFullYear();
                //  获取当前月（0-11，所以 + 1）  4 月
                this.currentMonth = date.getMonth() + 1;
                //  本月第一天是周几（范围是 0 周日 到 6 周六） 周 2
                this.currentWeek = date.getDay();
                //  当前日期和时间
                var today = new Date();
                //  4 月
                this.LocalMonth = today.getMonth() + 1;
                //  周日
                if (this.currentWeek == 0) {
                    //  将周日从 0 改为 7，方便计算
                    this.currentWeek = 7;
                }
                //  3. 生成日历数据 2025-04-01
                var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
                //  日期数组
                this.days.length = 0;

                //  今天是周日，放在第一行第 7 个位置，前面 6 个日期

                //  本月第一天是周二，放在第一行第 2 个位置，前面 1 个日期
                //  初始化本周之前的日期
                for (var i = this.currentWeek - 1; i >= 0; i--) {
                    //  本月第一天
                    var d = new Date(str);
                    //  向前推算日期
                    d.setDate(d.getDate() - i);
                    //  dayobject {day:date, index:2}
                    var dayobject = {};
                    dayobject.day = d;
                    var now = new Date();
                    if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()) {
                        //  从今天开始显示供预定的数量
                        dayobject.index = index++;
                    } else if (index != 0 && index < 3)
                    //  从今天开始 3 天内显示供预定的数量
                        dayobject.index = index++;
                    //  将日期放入 data 中的 days 数组 供页面渲染使用
                    this.days.push(dayobject);
                }
                //  初始化本周之后的日期（其他周）
                for (var i = 1; i <= 35 - this.currentWeek; i++) {
                    //  本月第一天
                    var d = new Date(str);
                    //  类似逻辑，向后推算日期
                    d.setDate(d.getDate() + i);
                    //  dayobject {day:date, index:2}
                    var dayobject = {};
                    dayobject.day = d;
                    var now = new Date();
                    if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()) {
                        //  从今天开始显示供预定的数量
                        dayobject.index = index++;
                    } else if (index != 0 && index < 3)
                    //  从今天开始 3 天内显示供预定的数量
                        dayobject.index = index++;
                    //  将日期放入 data 中的 days 数组 供页面渲染使用
                    this.days.push(dayobject);
                }

                /*this.leftobj = [
                    { date: 1, number: 120, reservations: 1 },
                    { date: 3, number: 120, reservations: 1 },
                    { date: 4, number: 120, reservations: 119 },
                    { date: 6, number: 120, reservations: 1 },
                    { date: 8, number: 120, reservations: 1 }
                ];*/

                //  发送 ajax 请求，根据当前页面对应的月份（此处 date 格式为：yyyy-MM）查询对应的预约设置数据，封装成相应结果赋值给 leftobj 模型数据，用于页面展示
                axios.post("/ordersetting/getOrderSettingByMonth.do?date=" + this.currentYear + "-" + this.currentMonth).then((res) => {
                    if (res.data.flag) {
                        //  保存服务器返回的预约数据
                        this.leftobj = res.data.data;
                    } else {
                        //  显示错误信息
                        this.$message.error(res.data.message);
                    }
                });
            },
            //  切换到当前月份
            goCurrentMonth(year, month) {
                var d = new Date();
                this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
            },
            //  向前一个月
            pickPre(year, month) {
                //  setDate(0); 上月最后一天
                //  setDate(-1); 上月倒数第二天
                //  setDate(dx) 参数 dx 为上月最后一天的前后 dx 天
                var d = new Date(this.formatDate(year, month, 1));
                //  获取上月最后一天 的日期
                d.setDate(0);
                this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
            },
            //  向后一个月
            pickNext(year, month) {
                var d = new Date(this.formatDate(year, month, 1));
                //  获取指定天数之后的日期
                d.setDate(35);
                this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
            },
            //  返回类似 2019-01-01 格式的字符串
            formatDate(year, month, day) {
                var y = year;
                var m = month;
                var d = day;
                if (m < 10) m = "0" + m;
                if (d < 10) d = "0" + d;
                return y + "-" + m + "-" + d
            }
        }
    });
</script>
</html>